/**
 * 
 */
var start = false;
var startX = 0, startY = 0; // 3의 변수는 전역으로 빼준다. 
var ctx;

function DrawingInit(){
	// document.getElementById('canvas').onclick = DrawingFunc;	// 1. 클릭한 위치를 가져옴. 
	// document.getElementById('canvas').onmousemove = DrawingFunc;	// 2 움직이는 위치를 바로 가져옴. 
	// 3. 컨트롤이 잘 안되는 노인, 아이들을 위해서 시작점과 끝나는 점을 잡음
	document.getElementById('canvas').onmousemove=DrawingFunc;
	document.getElementById('canvas').onmouseup=set;
	ctx = document.getElementById('canvas').getContext('2d');
}
function set(ev){
	var lc;
	var lw;
	start = !start;
	startX = ev.x-12;
	startY = ev.y-12;
	// 선 그리기 시작점 설정
	if(start){
		ctx.beginPath();
		ctx.moveTo(startX,startY);
		lc = document.getElementById('lineColor');// 선 색을 불러옴 
		ctx.strokeStyle = lc.value; // 선 색깔
		lw = document.getElementById('lineWidth'); // line.width 선 굵기
		ctx.lineWidth = lw.value;
	}else{
		ctx.closePath();
	}
	 
}

function DrawingFunc(e){
	/*var d = document.getElementById("result");
	var x = e.x;
	var y = e.y;
	d.innerHTML = 'x =' + x + '. y =' + y;*/ //1,2번
	
	var d = document.getElementById("result");
	var x = e.x;
	var y = e.y;
	d.innerHTML = 'x =' + x + '. y =' + y;
	if(start){
	ctx.lineTo(x,y);
	ctx.stroke();
	}
}